<template>
  <view class="news-item" @click="onClick">
    <u-image
      class="mr-20"
      :width="imageWidth"
      :height="imageHeight"
      :src="info.imgUrl"
      :border-radius="8"
    >
    </u-image>
    <view class="flex-1 flex fd-column justify-between">
      <text class="title">{{ info.title }}</text>
      <view class="flex justify-between align-center">
        <text class="content">{{ info.createTime }}</text>
        <view class="flex align-center">
          <u-icon name="eye-fill" color="#999999" size="44rpx"></u-icon>
          <text style="margin-left: 8rpx" class="content">{{
            info.popularity
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: {},
    },
    imageWidth: {
      type: Number,
      default: 224,
    },
    imageHeight: {
      type: Number,
      default: 156,
    },
  },
  name: "news-item",
  data() {
    return {};
  },
  methods: {
    onClick() {
      this.$emit("click", this.info);
    },
  },
};
</script>

<style scoped lang="scss">
.news-item {
  display: flex;
  padding: 28rpx 24rpx;
  border-bottom: 1px solid #ededed;
}

.content {
  font-size: 26rpx;
  font-weight: 400;
  line-height: 30rpx;
  color: #999999;
}

.title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  font-size: 30rpx;
  line-height: 40rpx;
  color: $zx-main-color;
  font-weight: 400;
}
</style>
